import React from 'react';
import './Forum.css';

const Forum = ({ posts }) => {
  // 使用传入的posts数据
  const hotTopics = posts
    .sort((a, b) => b.views - a.views)
    .slice(0, 5);

  return (
    <div className="forum-container">
      {/* FUTURE DEV: 状态管理
        - 使用Redux/Context管理帖子状态
        - 实现帖子CRUD操作
        - 管理用户认证状态
        - 处理加载和错误状态
      */}
      
      <div className="forum-main">
        <div className="forum-content">
          <div className="forum-header">
            <h1>社区论坛</h1>
            {/* FUTURE DEV: 搜索功能
              - 实现实时搜索
              - 添加高级筛选
              - 支持标签过滤
            */}
          </div>

          <div className="forum-filters">
            <button className="filter-button active">最新</button>
            <button className="filter-button">热门</button>
            <button className="filter-button">精华</button>
          </div>

          <div className="post-list">
            {posts.map(post => (
              <article key={post.id} className="post-card">
                <div className="post-content">
                  <h2>{post.title}</h2>
                  <div className="post-meta">
                    <span className="author">{post.author.name}</span>
                    <span className="date">{new Date(post.createdAt).toLocaleDateString()}</span>
                  </div>
                  <div className="post-tags">
                    {post.tags.map(tag => (
                      <span key={tag} className="tag">{tag}</span>
                    ))}
                  </div>
                </div>
                <div className="post-stats">
                  <span className="likes">
                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                      <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>
                    </svg>
                    {post.likes}
                  </span>
                </div>
              </article>
            ))}
          </div>
        </div>

        <aside className="forum-sidebar">
          <div className="sidebar-section">
            <h3>热门话题</h3>
            <ul className="hot-topics">
              {hotTopics.map(topic => (
                <li key={topic.id} className="topic-item">
                  <span className="topic-title">{topic.title}</span>
                  <span className="topic-views">{topic.views} 浏览</span>
                </li>
              ))}
            </ul>
          </div>
        </aside>
      </div>

      <button className="create-post-button">
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor">
          <path d="M12 5v14M5 12h14"/>
        </svg>
        发帖
      </button>
    </div>
  );
};

export default Forum; 